<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<!DOCTYPE html>
<html>
	<head>
		<meta name="renderer" content="webkit" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>功能清单</title>
		<style type="text/css">
		html,body{margin:0px; padding:0px; width:100%; height:100%; font-size:14px;}
		.con_left{float:left; width:350px; height:100%; overflow:scroll;}
		.con_right{margin-left:350px; height:100%; overflow:scroll;}
		.con-rigth-in{ padding:10px;}
		#content_api{ padding:10px;}
		.head_title{text-align:center; font-size:24px; margin:10px; font-weight: bold;}
		.ol_apis{ padding:5px; font-family:tahoma,Arial,Microsoft YaHei,\5b8b\4f53; list-style:none;}
		.ol_apis li{background:#eee;border-radius:5px; margin-bottom:5px; padding:5px;}
		.ol_apis a{display:inline-block;text-decoration:none;}
		.ol_apis a:hover{color:#F90;}
		.ol_apis .api_title { font-size:15px; font-weight: bold; cursor:pointer; display:block;}
		.ol_api.selected{ background:#FF9400; color:#FFF;}
		.fun_comment{ background:f3f5f7; }
		.float_r{ float:right;}
		.hidden{ display:none;}
		.clear_both{clear:both; }
		</style>
		<script charset="utf-8" src="${pageContext.request.contextPath }/resources/plugs/jquery/jquery.js"></script>
		<script type="text/javascript">
		$(function(){
			$(".api_title").click(function(){
				var tar = $(this);
				$(".ol_api").removeClass("selected");
				tar.parents(".ol_api").addClass("selected");
				$("#content_api").html($("#description"+tar.attr("data")).html());
				//console.log($("#description"+tar.attr("data")).html());
			});
		});
		function apilistDel(id){
			if(confirm("确定删除?")){
				window.location.href = "${pageContext.request.contextPath }/apilist/del/"+id;
			}
		}
		</script>
</head>
<body>
	<div class="con_left">
		<div style="padding:10px;">
			<div class="head_title">API列表 <font style="font-size:small; color:#666;">[点击API标题可查看详情]</font></div>
			<div style="text-align:right;"><a href="${pageContext.request.contextPath }/apilist/toadd">新增API</a></div>
			<ol class="ol_apis">
				<c:forEach items="${list }" var="item" varStatus="vs">
				<li class="ol_api">
					<div>
						<span class="api_title" data="${item.id }">${vs.index+1 }、${item.title }</span>
						<a class="float_r" href="javascript:;" onclick="apilistDel(${item.id})">删除</a>
						<a class="float_r" href="${pageContext.request.contextPath }/apilist/edit/${item.id}">编辑&nbsp;&nbsp;</a>
						<div class="clear_both"></div>
					</div>
					<div class="fun_comment hidden" id="description${item.id }">${item.description }</div>
				</li>
				</c:forEach>
			</ol>
		</div>
	</div>
	<div class="con_right">
	<div class="con-rigth-in">
<h4 style="color:#aaa">
注:需要认证的API，必须带上参数:user_id(用户id),access_token(请求令牌),api_request_way(请求方式，1 安卓 2ios)<br/>
api返回数据的格式：
<pre>
{
	"state": "1",--状态码，0：失败，1：成功，1003：未登录
	"code": null, --扩展状态码，对state做一些扩展说明，当state为0的时候，code【10001:未绑定手机】
	"time": 1444440110, --服务器当前时间，时间戳（秒）
	"referer": null, --暂无用
	"message": null, --错误说明
	"data": {} --扩展数据
}
</pre>
</h4>
<hr />
<div id="content_api"></div>
	</div>
</div>
</body>
</html>